<template>
  <view>
    <view class="detail-bgi">
      <image style="width: 100%;filter: blur(10px);" mode="widthFix" :src="detail.image"></image>
    </view>
    <view class="detail-img">
      <image style="width: 180rpx;" mode="widthFix" :src="detail.image"></image>
    </view>
    <view class="detail-title f-w f-s-18 m-t-10">
      <text>{{detail.name | update}}</text>
    </view>
    <view class="detail-text m-t-50 m-l-20 f-s-14 grey-deep-font-color">
      <text>动态 {{detail.all}}</text>
      <text class="m-l-20">今日 {{detail.today}}</text>
      <view class="m-t-20 m-l-10">{{detail.desc}}</view>
    </view>
    <view class="grey-light-bg-color m-t-20" style="height: 40rpx;filter: blur(5px);"></view>
  </view>
</template>

<script>
  export default {
    name: "my-detail",
    props: {
      detail: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {};
    },
    filters: {
      update(str) {
        return "#" + str + "#"
      }
    }
  }
</script>

<style lang="scss">
  .detail-bgi {
    overflow: hidden;
    width: 100%;
    height: 400rpx;
  }

  .detail-img {
    width: 180rpx;
    height: 180rpx;
    box-shadow: 1px 1px 1px black;
    position: absolute;
    top: 300rpx;
    left: 20rpx;
  }

  .detail-title {
    margin-left: 220rpx;
  }
</style>